<template>
  <div>
    parent
    <el-button type='primary' @click='goto'>start</el-button>
    <Child v-if='visible' :obj='obj' :visible.sync='visible' />
  </div>
</template>

<script>
import child from './child'

export default {
  name: 'parent',
  data() {
    return {
      visible: false,
      obj: {
        info: [
          { name: 'jack' },
          { score: 100 },
          { age: 20 }
        ],
        message: 'this is a book'
      }
    }
  },
  components: {
    Child: child
  },
  created() {
    console.log('parent-created')

  },
  beforeCreated() {
    console.log('parent-beforeCreated')
  },
  beforeMounted() {
    console.log('parent-beforeMounted')
  },
  mounted() {
    console.log('parent-mounted')
  },
  destroy() {
    console.log('parent-destroy')
  },
  methods: {
    goto() {
      this.visible = true
    }
  }
}
</script>

<style scoped>

</style>